<template>
	<view class="">
		<!-- <search></search> -->
		<!-- <sc-search></sc-search> -->
		<view class="topTop">
			<view class="search">
				<view class="classify" @tap="changeDraw">
					<i class="icon">&#xe649;</i>
					<view class="classify_item">
						分类
					</view>
				</view>
				<view class="search1">
					<view class="search1-input">
						<view class="search1-flex">
							<input class="search1-input_input" type="text" @focus="inputfocus" @input="changeInput" v-model="keyword" confirm-type="搜索" placeholder-class="place" placeholder="儿童加绒外套49.9" />
							<i class="icon error_icon" v-if="keyword" @tap="clear"> &#xe66f; </i>
						</view>
						<text @tap="searchnav(keyword)" class="search-close">搜索</text>
					</view>
				</view>
				<view class="classify" @tap="changeList">
					<i class="icon" v-if="!listBoxFlag">&#xe736;</i>
					<i class="icon" v-else>&#xe737;</i>
					<view class="classify_item">
						列表
					</view>
				</view>
			</view>
			<!-- 导航 -->
			<view class="nav">
				<view :class="['nav_item', navindex == index? 'nav_item_item': '']" @tap="changenav(index)" v-for="(item, index) in navlist" :key="index">
					{{item.title}}
					<view class="" v-if="index == 2">
						<view class="p-box">
							<text :class="{active: priceOrder === 1 && navindex === 2}" class="icon-shang"></text>
							<text :class="{active: priceOrder === 2 && navindex === 2}" class="icon-shang xia"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true"  class="product-Con" :style="{height:searchHeight+'px'}">
			<view class="product" v-if="listBoxFlag">
				<view class="list" v-for="(item,index) in productList" @tap="toproductdetail(index)" :key="index">
					<view class="pic">
						<image :src="item.pic" mode=""></image>
					</view>
					<view class="info">
						<view class="info_tilte">
							{{item.title}}
						</view>
						<view class="desc">
							{{item.desc}}
						</view>
						<!-- <view class="num">
							月销量{{item.num}}
						</view> -->
						<view class="volume volume-font"><image src="../../static/image/index/ic-hot.png" mode="widthFix"></image>销量:{{item.volume}}</view>
						<view class="price clearfix">
							<text class="price_now">{{item.price}}</text>
							<text class="price_line">￥{{item.line_price}}</text>
						</view>
						<view class="addcart">
							<image :src="Url+'add_images/ic-add.png'" mode=""></image>
						</view>
						<!-- <slot @tap="change(index,key)" name="add_delet"></slot> -->
					</view>
				</view>
			</view>
			<product-two v-else @toproductdetail="toproductdetail" :productList="productList"></product-two>
		</scroll-view>
		<!-- 抽屉导航 -->
		<uni-drawer :visible="drawFlag" :mask="true" mode="left" @close="closeDrawer" width="37%" height="100%">
			<scroll-view class="navigation" scroll-y>
				<view class="draw_navigation-all all-one">所有商品</view>
				<view class="draw_navigation" v-for="(nav,index) in navListww" :key="index">
					<view class="draw_navigation-list">
						<text class="all-one">{{nav.navtitle}}</text>
						<view class="draw_navigation-li">
							<text class="all-two" v-for="(t,i) in nav.classTwo" :key="i">{{t.title}}</text>
						</view>
					</view>
				</view>
			</scroll-view>

		</uni-drawer>
	</view>
</template>

<script>
	import productTwo from '@/components/classify/productwo.vue'
	import search from '@/components/classify/search.vue'
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
	import scSearch from '../../pages/components/sc-search.vue';
	export default {
		components: {
			search,
			productTwo,
			uniDrawer,
			scSearch
		},
		data() {
			return {
				Url:this.Imgurl,
				left_navindex: -1,
				search_content: '',
				arrangeflag: true,
				navigitionOne: '',
				navigitionTwo: '',
				listBoxFlag: false,
				drawFlag: false,
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				navlist: [{
						title: '综合',
						pic1: '../../static/image/mine/index/classify01.png',
						pic2: '../../static/image/mine/index/classify11.png'
					},
					{
						title: '销量',
						pic1: '../../static/image/mine/index/classify01.png',
						pic2: '../../static/image/mine/index/classify11.png'
					},
					{
						title: '价格',
						pic1: '../../static/image/mine/index/classify02.png',
						pic2: '../../static/image/mine/index/classify12.png'
					},
					// {
					// 	title: '列表',
					// 	pic01: '../../static/image/mine/index/classify04.png',
					// 	pic11: '../../static/image/mine/index/classify14.png',
					// 	pic02: '../../static/image/mine/index/classify03.png',
					// 	pic22: '../../static/image/mine/index/classify13.png',
					// }
				],
				navindex: 0,
				productList: [

					{
						pic: this.Imgurl+'mine/index/groupbooking02.png',
						title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
						desc: '品质保障 美味新鲜',
						price: '129.00',
						line_price: '199.00',
						volume:'2',
						num: '1'
					},
					{
						pic: this.Imgurl+'mine/index/groupbooking02.png',
						title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
						desc: '品质保障 美味新鲜',
						price: '129.00',
						line_price: '199.00',
						volume:'2',
						num: '1'
					},
					{
						pic: this.Imgurl+'mine/index/groupbooking02.png',
						title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
						desc: '品质保障 美味新鲜',
						price: '129.00',
						line_price: '199.00',
						volume:'2',
						num: '1'
					},

				],
				navListww: [{
						navtitle: '蔬菜水果',
						classTwo: [{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							}
						]
					},
					{
						navtitle: '肉禽水产',
						classTwo: [{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							}
						]
					},
					{
						navtitle: '粮油副食',
						classTwo: [{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							}
						]
					},
					{
						navtitle: '蔬食素食',
						classTwo: [{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							}
						]
					}
				],
				searchHeight:0
			}
		},
		onLoad(options) {
			this.navigitionOne = options.navid
			this.navigitionTwo = options.productid
			console.log(this.navigitionTwo);
		},
		mounted() {
			let that = this;
			uni.getSystemInfo({
			    success: function (res) {
					const query = uni.createSelectorQuery()
					query.select('.topTop').boundingClientRect(data => {
						that.searchHeight = res.windowHeight - data.height;
						// uni.setStorageSync('searchHeight',data.height)
					}).exec();
			    }
			});
		},
		methods: {
			searchTap() {
				uni.navigateTo({
					url: '/pageA/search/search'
				})
			},
			oneclassify(index) {
				if (this.left_navindex == index) {
					this.left_navindex = -1
				} else {
					this.left_navindex = index
				}
			},
			changeDraw() {
				console.log(111);
				this.drawFlag = true
			},
			// 抽屉导航跳转
			toNavigition(index, key) {
				uni.redirectTo({
					url: '/pageB/classify/procudt?navid=' + index + '&productid=' + key
				})
			},
			// 关闭抽屉导航时触发
			closeDrawer() {
				this.drawFlag = false
			},
			// 改变列表的排列方式
			changeList() {
				this.listBoxFlag = !this.listBoxFlag
			},
			// 清空搜索框内容
			clear() {
				this.search_content = ''
			},
			changenav(index) {
				this.navindex = index
				// if (index == 2) {
				// 	this.arrangeflag = !this.arrangeflag
				// 	this.listBoxFlag = !this.listBoxFlag
				// 	if (this.navlist[2].title !== '大图') {
				// 		this.navlist[2].title = '大图'
				// 	} else {
				// 		this.navlist[2].title = '列表'
				// 	}
				// 	console.log(this.navList)
				// } else 
				if (index == 2) {
					this.priceOrder = this.priceOrder == 1 ? 2 : 1
					// if (this.priceOrder != 1) {
					// 	this.priceOrder = 1
					// } else {
					// 	this.priceOrder = 2
					// }
				}
			},
			toproductdetail(index) {
				uni.navigateTo({
					url: '/pageB/classify/productdetail?id=' + index + '&type=' + '0'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.search1 {
	
	&-input{
		display: flex;
		align-items: center;
		padding: 0 30upx;
		justify-content: space-between;
	}
	&-close{
		font-size: 30upx;
		color: #666666;
	}
	&-input_input{
		font-size: 28upx;
		color: #333333;
		width: 80%;
	}
	&-flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20upx 0;
		padding: 0 30upx;
		width:80%;
		height:60upx;
		background:rgba(249,249,249,1);
		border-radius:30upx;
	}
	.error_icon{
		color: #D1D1D1;
	}	
		.btn {
			width: 80upx;
			height: 60upx;
			border-radius: 10upx;
			background-color: #f83e2f;
			color: #F1F1F1;
			font-size: 28upx;
			text-align: center;
			line-height: 60upx;
			margin-left: 20upx;
		}
	
		.classify {
			width: 80upx;
			height: 60upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
	
			.icon {
				font-size: 24upx;
				color: #c2c2c2;
			}
	
			.classify_item {
				font-size: 24upx;
				color: #c2c2c2;
				line-height: 24upx;
			}
		}
	}
	.product-Con{
		
	}
	.volume {
		font-size: 20upx;
		color: #999;
		margin: 10upx 0 25upx 0;
	}
	.volume-font{
		padding: 8upx 17upx;
		box-sizing: border-box;
		background:rgba(255,40,66,0.04);
		width: auto;
		height: auto;
		float: left;
		border-radius:4upx;
		color: #FF2842;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width:25upx;
			height: 25upx;
			margin-right:10upx;
		}
	}
	.p-box {
		display: flex;
		flex-direction: column;

		.icon-shang {
			display: inline-block;
			width: 10upx;
			height: 10upx;
			margin-left: 10upx;
			border-top: 2upx solid #888;
			border-left: 2upx solid #888;
			transform: rotate(45deg);

			&.active {
				border-top: 2upx solid red;
				border-left: 2upx solid red;
			}
		}

		.xia {
			transform: rotate(-135deg);
		}
	}

	.search {
		width: 100%;
		height: 100upx;
		padding: 0 10upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #fff;

		.search_input {
			flex: 1;
			height: 60upx;
			position: relative;

			.search_input_input {
				width: 100% !important;
				height: 100%;
				background-color: #F1F1F1;
				border-radius: 8upx;
				font-size: 28upx;
				color: #969696;
				padding-left: 50upx;
				box-sizing: border-box;
			}

			.search_icon {
				position: absolute;
				left: 10upx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 28upx;
				height: 28upx;
				color: #a8a8a8;
			}

			.error_icon {
				position: absolute;
				right: 10upx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 28upx;
				color: #a8a8a8;
			}
		}

		.btn {
			width: 80upx;
			height: 60upx;
			border-radius: 10upx;
			background-color: #f83e2f;
			color: #F1F1F1;
			font-size: 28upx;
			text-align: center;
			line-height: 60upx;
			margin-left: 20upx;
		}

		.classify {
			width: 80upx;
			height: 60upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.icon {
				font-size: 24upx;
				color: #c2c2c2;
			}

			.classify_item {
				font-size: 24upx;
				color: #c2c2c2;
				line-height: 24upx;
			}
		}
	}

	.nav {
		width: 100%;
		height: 84upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-bottom: 20upx;
		background-color: #FFFFFF;

		.nav_item {
			flex: 1;
			height: 32upx;
			font-size: 28upx;
			color: #333333;
			text-align: center;
			line-height: 32upx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 28upx;
				height: 28upx;
				margin-left: 8upx;
				vertical-align: middle;
			}
		}

		.nav_item_item {
			color: #FF2842;
		}
	}

	.product {
		background-color: #FFFFFF;
		padding: 0 15upx;
		box-sizing: border-box;
	}

	.list {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.pic {
			width: 180upx;
			height: 180upx;
			margin-right: 20upx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			flex: 1;
			position: relative;
			padding: 20upx 0;
			box-sizing: border-box;
			border-bottom: 2upx solid #f0f0f0;

			.info_tilte {
				font-size: 28upx;
				color: #333333;
				overflow: hidden;/*超出部分隐藏*/
				white-space: nowrap;/*不换行*/
				text-overflow:ellipsis;/*超出部分文字以...显示*/
			}

			.desc {
				font-size: 24upx;
				color: #666;
				line-height: 32upx;
			}

			.price {
				margin-top: 20upx;

				.price_now {
					font-size: 28upx;
					color: #f73e2f;
					line-height: 40upx;
					font-weight: bold;
					&::before{
						content: "￥";
						display: inline-block;
						font-size: 20upx;
						font-weight: 500;
					}
				}

				.price_line {
					font-size: 18upx;
					color: #999;
					line-height: 40upx;
					text-decoration: line-through;
					margin-left: 10upx;
				}
			}

			.addcart {
				position: absolute;
				bottom: 15upx;
				right: 0;
				width: 44upx;
				height: 44upx;
				image {
					width: 100%;
					height: 100%;
				}
			}

			.add_delet {
				position: absolute;
				bottom: 20upx;
				right: 0;

				.delet {
					text-align: right;

					.icon {
						font-size: 28upx;
						color: #999999;
					}
				}

				.add {
					.icon {
						font-size: 28upx;
						color: #999999;
					}

					text {
						font-size: 28upx;
						margin: 0 10upx;
					}
				}
			}
		}

	}

	.list:last-child .info {
		border-bottom: none;
	}

	.navigation {
		height:100vh;
		.all-one{
			font-size: 30upx;
			color: #333333;
			font-weight: bold;
			border-bottom: 2upx solid #F9F9F9;
			padding: 40upx 0 40upx 24upx;
			display: block;
		}
		.all-two{
			font-size: 24upx;
			display: block;
			color: #666666;
			padding: 30upx 0 30upx 24upx;
		}
		.draw_navigation-all{
			
		}
		.draw_navigation-li{
			margin-top: 30upx;
		}
	}
	.draw_navigation {
		.draw_navigation_one {
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			font-size: 32upx;
			color: #000000;
			padding-left: 30upx;
			box-sizing: border-box;
			border-bottom: 2upx solid #E1E1E1;
			font-weight: 400;
		}

		.navigation_i {
			color: #f73e2f;
		}

		.draw_navigation_two {
			padding-left: 30upx;
			padding-top: 20upx;
			box-sizing: border-box;

			.draw_navigation_two_item {
				font-size: 28upx;
				color: #333333;
				line-height: 60upx;
			}

			.navigation_i {
				color: #f73e2f;
			}
		}
	}
</style>
